<template>
    <el-drawer
        :title="translate('主题配置')"
        :visible.sync="drawerVisible"
        append-to-body
        custom-class="vab-drawer"
        direction="rtl"
        size="280px"
    >
        <el-scrollbar class="theme-scrollbar">
            <div class="el-drawer__body">
                <el-form ref="form" :model="theme" label-position="left">
                    <el-divider content-position="left">
                        <vab-icon icon="settings-3-line"/>
                        {{ translate('常用设置') }}
                    </el-divider>
                    <el-form-item>
                        <template #label>
                            <label class="el-form-item__label">
                                {{ translate('布局') }}
                                <el-tooltip
                                    :content="
                    translate(
                      '布局配置仅在电脑视窗下生效，手机视窗时将默认锁定为纵向布局'
                    )
                  "
                                    effect="dark"
                                    placement="top"
                                >
                                    <vab-icon icon="question-line"/>
                                </el-tooltip>
                            </label>
                        </template>
                        <el-select v-model="theme.layout" :disabled="device === 'mobile'">
                            <el-option
                                key="column"
                                :label="translate('分栏')"
                                value="column"
                            />
                            <el-option
                                key="comprehensive"
                                :label="translate('综合')"
                                value="comprehensive"
                            />
                            <el-option
                                key="vertical"
                                :label="translate('纵向')"
                                value="vertical"
                            />
                            <el-option
                                key="horizontal"
                                :label="translate('横向')"
                                value="horizontal"
                            />
                            <el-option
                                key="common"
                                :label="translate('常规')"
                                value="common"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="translate('主题')">
                        <el-select v-model="theme.themeName" @change="setTheme">
                            <el-option
                                key="default"
                                :label="translate('默认')"
                                value="default"
                            />
                            <el-option
                                key="ocean"
                                :label="translate('海洋之心')"
                                value="ocean"
                            />
                            <el-option
                                key="green"
                                :label="translate('绿荫草场')"
                                value="green"
                            />
                            <el-option
                                key="white"
                                :label="translate('碰触纯白')"
                                value="white"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="translate('标签')">
                        <el-switch v-model="theme.showTabs"/>
                    </el-form-item>
                    <el-form-item>
                        <template #label>
                            <label class="el-form-item__label">
                                {{ translate('标签图标') }}
                                <el-tooltip
                                    :content="translate('标签开启时生效')"
                                    effect="dark"
                                    placement="top"
                                >
                                    <vab-icon icon="question-line"/>
                                </el-tooltip>
                            </label>
                        </template>
                        <el-switch
                            v-model="theme.showTabsBarIcon"
                            :disabled="!theme.showTabs"
                        />
                    </el-form-item>
                    <el-form-item>
                        <template #label>
                            <label class="el-form-item__label">
                                {{ translate('标签风格') }}
                                <el-tooltip
                                    :content="translate('标签开启时生效')"
                                    effect="dark"
                                    placement="top"
                                >
                                    <vab-icon icon="question-line"/>
                                </el-tooltip>
                            </label>
                        </template>
                        <el-select v-model="theme.tabsBarStyle" :disabled="!theme.showTabs">
                            <el-option
                                key="card"
                                :label="translate('卡片')"
                                value="card"
                            />
                            <el-option
                                key="smart"
                                :label="translate('灵动')"
                                value="smart"
                            />
                            <el-option
                                key="smooth"
                                :label="translate('圆滑')"
                                value="smooth"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <template #label>
                            <label class="el-form-item__label">
                                {{ translate('分栏风格') }}
                                <el-tooltip
                                    :content="translate('分栏布局时生效')"
                                    effect="dark"
                                    placement="top"
                                >
                                    <vab-icon icon="question-line"/>
                                </el-tooltip>
                            </label>
                        </template>
                        <el-select
                            v-model="theme.columnStyle"
                            :disabled="theme.layout !== 'column'"
                        >
                            <el-option
                                key="vertical"
                                :label="translate('纵向')"
                                value="vertical"
                            />
                            <el-option
                                key="horizontal"
                                :label="translate('横向')"
                                value="horizontal"
                            />
                            <el-option
                                key="card"
                                :label="translate('卡片')"
                                value="card"
                            />
                        </el-select>
                    </el-form-item>
                    <el-divider content-position="left" style="margin-top: 20px">
                        <vab-icon icon="settings-3-line"/>
                        {{ translate('其它设置') }}
                    </el-divider>
                    <el-form-item :label="translate('头部固定')">
                        <el-switch
                            v-model="theme.fixedHeader"
                            :disabled="theme.layout === 'common'"
                        />
                    </el-form-item>
                    <el-form-item :label="translate('国际化')">
                        <el-switch v-model="theme.showLanguage"/>
                    </el-form-item>
                    <el-form-item :label="translate('进度条')">
                        <el-switch v-model="theme.showProgressBar"/>
                    </el-form-item>
                    <el-form-item :label="translate('刷新')">
                        <el-switch v-model="theme.showRefresh"/>
                    </el-form-item>
                    <el-form-item :label="translate('搜索')">
                        <el-switch v-model="theme.showSearch"/>
                    </el-form-item>
                    <el-form-item :label="translate('通知')">
                        <el-switch v-model="theme.showNotice"/>
                    </el-form-item>
                    <el-form-item :label="translate('全屏')">
                        <el-switch v-model="theme.showFullScreen"/>
                    </el-form-item>
                </el-form>
            </div>
        </el-scrollbar>
        <div class="el-drawer__footer">
            <el-button type="primary" @click="handleSaveTheme">
                {{ translate('保存') }}
            </el-button>
            <el-button @click="setDefaultTheme">
                {{ translate('恢复默认') }}
            </el-button>
        </div>
    </el-drawer>
</template>

<script lang="ts">
import _ from 'lodash'
import {Component} from "vue-property-decorator";
import BaseVue from "@/common/base-vue";
import {SettingMutationEnum, SettingsGetterEnum} from '@/store/enum/store.enum'

@Component({components: {}})
export default class VabThemeDrawer extends BaseVue {

    private drawerVisible: boolean = false;

    get theme() {
        return this.$store.getters[SettingsGetterEnum.theme]
    }

    get device() {
        return this.$store.getters[SettingsGetterEnum.device]
    }

    private created() {
        this.$bus.$on('theme', () => {
            this.handleOpenTheme()
        })
        this.$bus.$on('random-theme', () => {
            this.randomTheme()
        })
        this.setTheme()
    };

    private saveTheme() {
        this.$store.commit(SettingMutationEnum.saveTheme)
    };

    private resetTheme() {
        this.$store.commit(SettingMutationEnum.resetTheme)
    };

    private handleOpenTheme() {
        this.drawerVisible = true
    };

    private async setDefaultTheme() {
        await this.resetTheme()
        this.drawerVisible = false
    };

    private async handleSaveTheme() {
        await this.saveTheme()
        this.drawerVisible = false
    };

    private async randomTheme() {
        const loading = this.baseColorFullLoading(0, 'loading');
        // 随机换肤重置移除主题，防止代码更新影响样式
        await this.resetTheme()
        const themeNameArray = ['default', 'ocean', 'green', 'white']
        this.theme.themeName = _.sample(
            _.pull(themeNameArray, [this.theme.themeName])
        );
        const columnStyleArray = ['vertical', 'horizontal', 'card']
        this.theme.columnStyle = _.sample(
            _.pull(columnStyleArray, [this.theme.columnStyle])
        );
        const tabsBarStyleArray = ['card', 'smart', 'smooth']
        this.theme.tabsBarStyle = _.sample(
            _.pull(tabsBarStyleArray, [this.theme.tabsBarStyle])
        );
        const showTabsBarIconArray = [true, false]
        this.theme.showTabsBarIcon = _.sample(
            _.pull(showTabsBarIconArray, [this.theme.showTabsBarIcon])
        );
        if (this.device === 'desktop') {
            const layoutArray = [
                'horizontal',
                'vertical',
                'column',
                'comprehensive',
                'common',
            ]
            this.theme.layout = _.sample(_.pull(layoutArray, [this.theme.layout]))
        } else {
            this.theme.layout = 'vertical'
        }
        await this.setTheme()
        await this.saveTheme()
        setTimeout(() => {
            loading.close()
        }, 1000)
    };

    private setTheme() {
        document.getElementsByTagName(
            'body'
        )[0].className = `vab-theme-${this.theme.themeName}`
    };

}
</script>

<style lang="scss" scoped>
.theme-scrollbar {
    height: calc(100vh - 118px) !important;
    overflow: hidden;
}
</style>
<style lang="scss">
.vab-drawer {
    .el-drawer__header {
        margin-bottom: $base-margin;
    }

    .el-drawer__body {
        padding: 0 $base-padding/2 $base-padding/2 $base-padding/2;

        .el-divider--horizontal {
            margin: 28px 0 28px 0;
        }

        .el-form-item {
            display: flex;
            align-items: center;

            .el-form-item__label {
                flex: 1 1;
            }

            .el-form-item__content {
                flex: 0 0 auto;
            }
        }

        .el-form-item--small.el-form-item {
            .el-input__inner {
                width: 115px;
            }
        }
    }

    .el-drawer__footer {
        padding: $base-padding/2;
        border-top: 1px solid $base-border-color;
    }
}
</style>
